
<template>
  <div class="user-coupon-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="标题">
        <el-input
          v-model="data.title"
          placeholder="请输入标题"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="显示模式">
        <el-radio-group v-model="data.displayMode">
          <el-radio label="grid">网格</el-radio>
          <el-radio label="list">列表</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="data.displayMode === 'grid'" label="每行显示">
        <el-radio-group v-model="data.gridColumns">
          <el-radio label="2">两个</el-radio>
          <el-radio label="3">三个</el-radio>
          <el-radio label="4">四个</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="卡片样式">
        <el-radio-group v-model="data.cardStyle">
          <el-radio label="default">默认</el-radio>
          <el-radio label="shadow">阴影</el-radio>
          <el-radio label="border">边框</el-radio>
          <el-radio label="transparent">透明</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="显示标签">
        <el-switch v-model="data.showTag" />
      </el-form-item>

      <el-form-item v-if="data.showTag" label="标签文字">
        <el-input
          v-model="data.tagText"
          placeholder="请输入标签文字"
          maxlength="10"
        />
      </el-form-item>

      <el-form-item label="显示阅读量">
        <el-switch v-model="data.showReadCount" />
      </el-form-item>

      <el-form-item label="显示点赞数">
        <el-switch v-model="data.showLikeCount" />
      </el-form-item>

      <el-form-item label="顶部更多">
        <el-switch v-model="data.showMore" />
      </el-form-item>

      <el-form-item label="底部更多">
        <el-switch v-model="data.showBottomMore" />
      </el-form-item>

      <el-divider>样式设置</el-divider>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="项目间距">
        <el-slider 
          v-model="data.itemMargin" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="顶部边距">
        <el-slider 
          v-model="data.paddingTop" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="水平边距">
        <el-slider 
          v-model="data.paddingHorizontal" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>优惠券数据</el-divider>

      <el-form-item label="优惠券列表">
        <div class="coupon-list-items">
          <div
            v-for="(item, index) in data.items"
            :key="index"
            class="coupon-list-item"
          >
            <el-input
              v-model="item.title"
              placeholder="请输入优惠券标题"
              size="small"
            />

            <ImageUpload
              v-model="item.image"
              :limit="1"
              :file-size="5"
              file-type="['jpg', 'jpeg', 'png', 'gif']"
            />

            <el-input
              v-model="item.tag"
              placeholder="请输入标签"
              maxlength="10"
              size="small"
            />

            <el-input-number
              v-model="item.readCount"
              placeholder="请输入阅读量"
              :min="0"
              size="small"
            />

            <el-input-number
              v-model="item.likeCount"
              placeholder="请输入点赞数"
              :min="0"
              size="small"
            />

            <el-button
              type="danger"
              icon="Delete"
              circle
              size="small"
              @click="removeItem(index)"
            />
          </div>

          <el-button
            type="primary"
            icon="Plus"
            @click="addItem"
            style="width: 100%; margin-top: 10px;"
          >
            添加优惠券
          </el-button>
        </div>
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import ImageUpload from '@/components/ImageUpload/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// 方法
function addItem() {
  if (!props.data.items) {
    props.data.items = []
  }

  props.data.items.push({
    title: '',
    image: '',
    tag: '',
    readCount: 0,
    likeCount: 0
  })

  emit('update:data', props.data)
}

function removeItem(index) {
  if (index >= 0 && index < props.data.items.length) {
    props.data.items.splice(index, 1)
    emit('update:data', props.data)
  }
}
</script>

<style lang="scss" scoped>
.user-coupon-panel {
  padding: 10px;

  .coupon-list-items {
    width: 100%;

    .coupon-list-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 4px;

      .el-input, .el-input-number, .el-upload {
        margin-bottom: 10px;
      }

      .el-button {
        align-self: flex-end;
      }
    }
  }
}
</style>
